<template>
  <div class="purchase_view">
    <el-dialog :title="title" center :visible.sync="open" width="800px" append-to-body>
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="流程表单" name="first"></el-tab-pane>
        <el-tab-pane label="流程签批" name="second">
          <TaskApproval v-if="activeName=='second'" ref="task" @refresh="reload" :instanceId="form.instanceId"></TaskApproval>
        </el-tab-pane>
      </el-tabs>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px"  v-if="activeName=='first'">
        <el-form-item style="margin-top: 0" label="流程创建" prop="createUserId">
          <span style="color: #0000ee">{{form.createTime}} {{form.createBy}}创建</span>
          <div style="float:right" v-if="form.flowStatusOpt=='finished'">
            <el-button type="text" @click="printDoc(form.instanceId)">下载领用文件 </el-button>
          </div>
        </el-form-item>
        <el-row>
            <el-col :span="12">
                <el-form-item label="申领日期" prop="applyDate">
                    {{form.applyDate}}
                </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="申领老师" prop="applyTeacherName" label-width="100px">
                    <div class="purchase_s_view">
                      {{form.applyTeacherName}}
                    </div>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="存放学校" prop="collegeId" size="small">
                  {{collegeName}}
                </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="存放实验室" prop="labId" label-width="100px" size="small">
                 {{labName}}
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="领用老师" prop="teacherVerify1Name">
                    <div class="purchase_s_view">
                      {{form.teacherVerify1Name}}
                    </div>
                </el-form-item>
            </el-col>
            <el-col :span="12" >
                <el-form-item label="库存老师" prop="teacherVerify2Name">
                    <div class="purchase_s_view">
                      {{form.teacherVerify2Name}}
                    </div>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="委托领取" prop="entrusted1Name">
                    <div class="purchase_s_view">
                      {{form.entrusted1Name}}
                    </div>
                </el-form-item>
            </el-col>
             <el-col :span="12">
                  <el-form-item label="委托领取" prop="entrusted2Name">
                      <div class="purchase_s_view">
                        {{form.entrusted2Name}}
                      </div>
                  </el-form-item>
              </el-col>
        </el-row>
      </el-form>
      <el-table style="width: 100%; margin-bottom: 20px; margin-top: -15px" :data="detailsList" v-if="activeName=='first'">
        <el-table-column label="编号" align="center" prop="purchaseDetailId" width="60"/>
        <el-table-column label="名称"  prop="materialName" :show-overflow-tooltip="true" />
        <el-table-column label="Cas号" align="center" prop="casNo" width="100"/>
        <el-table-column label="类别" align="center" prop="hazardousOpt" :formatter="kindsFormat" width="100"/>
        <el-table-column label="型号规格" align="center" prop="model" width="100"/>
        <el-table-column label="单位" align="center" prop="unitOpt" :formatter="unitOptFormat" width="60"/>
        <el-table-column label="领用数量" align="center" prop="occupationQuantity" width="60"/>
      </el-table>
      <pagination v-show="total>0 && activeName=='first'" :total="total" :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize" @pagination="getList" />

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { permit, } from "@/api/labdata/flowTask";
  import { getOccupation } from "@/api/labdanger/occupation";
  import { listDetails } from "@/api/labdanger/occupationDetail";
  import { getAllRestrictedKinds } from "@/api/labdata/cylindersType";
  import TaskApproval from '@/views/labdata/flowTask/task_approval.vue'
  import { getOrgByFunctionOpt, listSecondOrgLab } from "@/api/labdata/orgnization";
  export default {
    components: {
      TaskApproval
    },
    name: "OccupationPreview",
    data() {
      return {
        host:process.env.VUE_APP_PROXY,
        allUserList: [],
        checkedUserList: [],
        activeName: 'first',
        // 遮罩层
        loading: true,
        isPermit:false,
        // 总条数
        total: 0,
        //二级机构
        secondOrgList: [],
        //二级机构下的实验室
        secondOrgLabList: [],
        // 申请采购明细表格数据
        detailsList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        openEditNum : false,
        // 类别字典
        kindsOptions: [],
        // 单位字典
        unitOptOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          instanceId: null,
        },
        // 表单参数
        form: {},
        editForm :{},
        editItem: {},
        // 表单校验
        rules: {
        },
      };
    },
    props:{
      edit:Boolean,
    },
    computed: {
      collegeName() {
        const org = this.secondOrgList.find(item => item.orgId == this.form.collegeId)
        return org ? org.orgName : ''
      },
      labName() {
        const org = this.secondOrgLabList.find(item => item.orgId == this.form.labId)
        return org ? org.orgName : ''
      }
    },
    created() {
      this.isPermit = this.edit;
      this.getAllKinds();
      this.getDicts("unitOpt").then(response => {
        this.unitOptOptions = response.data;
      });
      getOrgByFunctionOpt(2).then(response => {
        this.secondOrgList = response.data;
      });
    },
    methods: {
      getAllKinds() {
        getAllRestrictedKinds().then(response => {
          this.kindsOptions = response.data;
        });
      },
      kindsFormat(row, column) {
        for (let i = 0; i < this.kindsOptions.length; i++) {
          if (this.kindsOptions[i].kindsId == row.hazardousOpt) {
            return this.kindsOptions[i].name;
          }
        }
        return '';
      },
      // 单位字典翻译
      unitOptFormat(row, column) {
        return this.selectDictLabel(this.unitOptOptions, row.unitOpt);
      },
      getList() {
        this.loading = true;
        listDetails(this.queryParams).then(response => {
          this.detailsList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
        this.$emit("refresh");
      },

      // 表单重置
      reset() {
        this.form = { };
        this.resetForm("form");
        this.activeName = 'first';
        this.detailsList = [];
      },
      /** 父组件查看按钮操作，不能删除 */
      handleUpdate(item) {
        this.reset();
        this.open = true;
        getOccupation(item.instanceId).then(response => {
          this.form = response.data;
          this.queryParams.instanceId = item.instanceId;
          this.getLabOrgs()
          this.title = '危化品领用详情查看和签批';
          permit(item.instanceId).then(resp=>{
            this.isPermit = resp.data!=null;
          });
          this.getList();
        });
      },
      getLabOrgs() {
        listSecondOrgLab(this.form.collegeId).then(response => {
          this.secondOrgLabList = response.data;
        });
      },
      reload(){
        if(this.edit){
          permit(this.queryParams.instanceId).then(resp=>{
            this.isPermit = resp.data!=null;
          });
        }
        this.$emit("refresh");
        this.$forceUpdate();
      },
      /** 修改按钮操作 */
      handleUpdateNum(row) {
         this.editForm = {
           quantity:null,
         }
         this.editForm.purchaseDetailId = row.purchaseDetailId;
         this.openEditNum = true;
      },
      cancelEdit(){
        this.openEditNum = false;
      },
      submitEditForm(){
        this.$refs["editForm"].validate(valid => {
          if (valid) {
            updateQuantity(this.editForm).then(response=>{
              this.getList();
              this.openEditNum = false;
            });
          }
        });
      },
      handleTabClick(e) {
      },
      printDoc(instanceId){
        window.location.href = this.host+'/labdata/labFile/printOccupation?id='+instanceId;
      },
    }
  };
</script>

<style lang="scss" scoped>
  .el-button.active {
    text-decoration: underline;
    color: #0000ee;
  }

  .el-button.dis_active {
    color: #999999
  }

  /deep/ .el-form .el-form-item {
    margin-bottom:0px;
  }
  .purchase_s_view {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
</style>
